<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理员中心</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/libs/modernizr.min.js"></script>

    <script type="text/javascript">
        function showPic(e, sUrl) {
            var x, y;
            x = e.clientX;
            y = e.clientY;
            document.getElementById("Layer1").style.left = x + 2 + 'px';
            document.getElementById("Layer1").style.top = y + 2 + 'px';
            document.getElementById("Layer1").innerHTML = "<img border='0' src=\"" + sUrl + "\">";
            document.getElementById("Layer1").style.display = "";
        }
        function hiddenPic() {
            document.getElementById("Layer1").innerHTML = "";
            document.getElementById("Layer1").style.display = "none";
        }
    </script>
</head>
<body>
<div class="topbar-wrap white">
    <!--<div class="topbar-inner clearfix">-->
    <div class="topbar-logo-wrap clearfix">
        <h1 class="topbar-logo none">
            <a href="index.html" class="navbar-brand">管理员中心</a>
        </h1>
    </div>
</div>
</div>
<div class="container clearfix">
    <div class="sidebar-wrap">
        <div class="sidebar-title">
            <h1>菜单</h1>
        </div>
        <div class="sidebar-content">
            <ul class="sidebar-list">
                <li><a href="#"><i class="icon-font">&#xe003;</i>图书管理</a>
                    <ul class="sub-menu">
                        <li><a href="getAll"><i class="icon-font">&#xe008;</i>图书列表</a></li>
                        <li><a href="getTypeAll"><i class="icon-font">&#xe008;</i>新增图书</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!--/sidebar-->
    <div class="main-wrap">

        <div class="crumb-wrap">
            <div class="crumb-list">
                <i class="icon-font"></i><a href="getAll" color="#white">图书列表</a><span
                    class="crumb-step"></span><span class="crumb-name"></span>
            </div>
        </div>
        <div class="search-wrap">
            <div class="search-content">
                <form action="getAll" method="post">
                    <table class="search-tab">
                        <tr>
                            <th width="70">书名:</th>
                            <td><input class="common-text" placeholder="关键字" name="bookname"
                                       id="" type="text" value="${name}"/></td>
                            <td><input class="btn btn-primary btn2" value="查询"
                                       type="submit" /></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="result-wrap">
            <form name="myform" id="myform" method="post">
                <div class="result-title">
                    <div class="result-list">
                        <a id="batchDel" href="javascript:void(0)" onclick="alert('此功能还在开发中')"><i
                                class="icon-font"></i>批量删除</a>
                    </div>
                </div>
                <div class="result-content">
                    <!-- 用于显示悬浮的图片 -->
                    <div id="Layer1" style="display: none; position: absolute; z-index: 30;"></div>
                    <!-- <a href="" ></a> -->
                    <table class="result-tab" width="100%">
                        <tr>
                            <th class="tc" width="5%"></th>
                            <th>序号</th>
                            <th>图书名称</th>
                            <th>图书价格</th>
                            <th>图书类型</th>
                            <th>出版时间</th>
                            <th>审核状态</th>
                            <th>操作</th>
                        </tr>
                        <c:forEach items="${bookList}" var="info">
                            <tr>
                                <td class="tc"><input name="id[]" value="" type="checkbox"></td>
                                <td>${info.id}</td>
                                <td onmouseout="hiddenPic();" onmousemove="showPic(event,'images/book_img/${info.imgUrl}');">${info.bookName}</td>
                                <td>￥${info.price}</td>
                                <td>
                                    <c:forEach items="${typeList}" var="type">
                                        <c:if test="${type.typeId == info.typeId}">
                                            ${type.typeName}
                                        </c:if>
                                    </c:forEach>
                                </td>
                                <td>${info.bornDate}</td>
                                <td>
                                    <c:if test="${info.state==1}">
                                        <span style="color: green">已审核</span>
                                    </c:if>
                                    <c:if test="${info.state==-1}">
                                        <span style="color: red">未审核</span>
                                    </c:if>
                                </td>
                                <td><a href="delete?id=${info.id}">[删除]</a> <a href="queryById?id=${info.id}">[修改]</a></td>
                            </tr>
                        </c:forEach>
                    </table>
                    <div class="list-page">
                        <a href="#" onclick="alert('此功能还在开发中')">首页</a> <a href="#" onclick="alert('此功能还在开发中')">上一页</a> <a href="#" onclick="alert('此功能还在开发中')">下一页</a> <a
                            href="#" onclick="alert('此功能还在开发中')">尾页</a><span>总共${size}条记录</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!--/main-->
</div>
</body>
</html>